Hello everyone,
I am experiencing a layout issue in a SwiftUI project where an icon inside a button becomes laggy after the keyboard is dismissed.
I have a custom input bar designed with an HStack containing a TextField and a Button with a microphone.fill icon. The entire HStack is styled using a .clipShape(.capsule) and a background color and I am using @FocusState to manage the keyboard focus.
When the user taps the TextField, the keyboard appears, and the entire view moves up correctly to make room.
But when the keyboard is dismissed by the button action isPromptFieldFocused = false, the capsule-shaped background and the text field return to their original position, but the icon on the button (and just the icon) doesn't.
The microphone icon inside the button does not follow the movement. It remains stuck at the "keyboard-up" height for a moment until the view is refreshed, breaking the UI. And by the way, the icon correctly returns to its original position with the other UI elements if the user presses the return key on their keyboard.
import SwiftUI
struct ContentView: View {
@State var userText: String = ""
@FocusState var isTextFieldFocused: Bool
var body: some View {
HStack {
TextField("Type here...", text: $userText)
.focused($isTextFieldFocused)
.textInputAutocapitalization(.sentences)
.textFieldStyle(PlainTextFieldStyle())
.padding(.leading, 12)
.padding(.trailing, 4)
Button(action: {
print("Microphone pressed")
isPromptFieldFocused = false
}) {
Image(systemName: "microphone.fill")
.font(.system(size: 22, weight: .semibold))
.foregroundStyle(.white)
.padding(14)
}
.background(Color.black)
.clipShape(Circle())
.padding(.trailing, 14)
.padding(.vertical, 14)
}
.background(Color.lightGray)
.clipShape(Capsule())
.padding()
}
}
I've already tried using different animation types (e.g., .default, .spring) and explicitly setting the frame of the button.
Has anyone encountered this specific behavior where an Image(systemName:) ignores the parent container's transition during keyboard dismissal? I would appreciate any insights on how to ensure the entire HStack and its children animate back down in sync.